<template>
	<view style="height: 100%; background-color: #F1F1F1;">
		<view style="background-color: #FFFFFF;">
			<view>
				<v-tabs v-model="current" :tabs="tabs" @change="changeTab"></v-tabs>
			</view>
		</view>
		<view>
			<view style="display: inline-block;">
				<view class="body-data back" style="display: inline-block;height: calc(25vh);" v-for="(item,index) in goods" :key="index"
				 @click="toGoodsDetail">
					<view class="" style="display: inline-block;position:sticky;width: calc(30vw);margin-top: calc(5vh);">
						<image :src="item.image ===null? 'null':item.image" style="width: calc(26vw);height: calc(15vh);"></image>
					</view>
					<view class="" style="display: inline-block;position: absolute; position:sticky;vertical-align: top;margin: 0 calc(1vw) 0 calc(1vh);width: calc(60vw);height:calc(36vw);">
						<view>
							<text style="font-size: calc(1vh); font-weight: 700;">{{item.name}}</text>
						</view>
						<view>
							<text v-for="(item,index) in 3" :key=index style="font-size: calc(1vh);margin: 0 calc(1vw) 0 calc(1vh);color:#FF0000;background-color: #ff5e62;">短视频</text>
						</view>
						<view style="font-size:35rpx;font-weight:700;color:#FF0000;">￥{{item.price}}</view>
						<view>
							<text style="font-size: calc(1vh);background-color:#CFB53B;">佣金:{{item.commission}}</text>
							<text style="font-size: calc(1vh);background-color:#CFB53B ;">销量：{{goods.sales}}件</text>
						</view>
						<view>
							<text style="font-size: calc(1vh);color: #CFB53B ;">{{item.shopName}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onReachBottom() {
			this.page = this.page + 1
			this.goodsList(this.index);
		},
		// props:["reciveUserInfo"],
		data() {
			return {
				tabs: [],
				goods: [],
				content: [],
				current: 0,
				page: 1,
				index: 0
			}
		},
		onLoad() {
			this.classification();
			this.goodsList(0);
		},
		methods: {
			changeTab(index) {
				console.log('当前选中的项：' + index)
				this.goods = [];
				this.page = 1
				this.index = index
				this.goodsList(index);
			},
			classification() {
				uni.request({
					url: 'http://zs.91gongju.cn:10003/goods/category/list',
					method: 'GET',
					success: (res) => {
						const result = res.data.data
						let classification = ['全部']
						result.forEach((item, index) => {
							classification.push(item.name)
						})
						this.tabs = classification;
					}
				});
			},
			goodsList(index) {
				console.log('页', this.page)
				console.log('类', this.index)
				console.log('类', index)
				if (index == 0) {
					uni.request({
						url: 'http://zs.91gongju.cn:10003/goods/list/' + this.page,
						method: 'POST',
						data: {
							categoryId: ''
						},
						success: (res) => {
							res.data.data.list.forEach((item, index) => {
								this.goods.push(item)
							})
						}
					});
				}
				if (index != 0) {
					uni.request({
						url: 'http://zs.91gongju.cn:10003/goods/list/' + this.page,
						method: 'POST',
						data: {
							categoryId: index
						},
						success: (res) => {
							console.log(res.data)
							res.data.data.list.forEach((item, index) => {
								this.goods.push(item)
							})
						}
					});
				}
			}
		}
	}
</script>

<style>
	.body-data {
		display: flex;
		flex-direction: column;
		width: calc(94vw);
		border-radius: calc(1vw);
		margin: calc(1vh) calc(2vw) 0 calc(2vw);
		padding: 0 calc(1vw) 0 calc(1vw);
	}

	.back {
		background-color: #FFFFFF;
	}
</style>
